<template>
  <div class="app-container">
    <div class="topBox">
      <div v-for="(item, index) in mainList" :key="index">
        {{ item.label }}: {{ item.value }}
      </div>
      <div style="opacity: 0"></div>
    </div>
    <div class="home">
      <div class="letfBox">
        <!-- 测试进度-->
        <div class="interval">
          <div class="caption">
            <div class="messg">审批</div>
          </div>
          <div class="titleText">
            <!-- <el-table :data="dataList" v-loading="loading" title="招工信息审批">
              <el-table-column
                label="序号"
                prop="index"
                width="50"
                align="center"
              >
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
              </el-table-column>
              <el-table-column
                label="所属公司"
                align="center"
                prop="companyName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="姓名"
                align="center"
                prop="name"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="招聘岗位"
                align="center"
                prop="gigTypeName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="招聘人数"
                align="needCount"
                prop="createTime"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="岗位薪资"
                align="center"
                prop="salary"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="reportClik(scope.row)"
                    v-hasPermi="['system:user:edit']"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table> -->
          
            <Certification :isMain="false" ></Certification>
          </div>
        </div>
      </div>
      <div class="rightBox">
        <div class="rightText interval" style="height: 291px">
          <div id="main2" style="width: 98%; height: 280px"></div>
        </div>
      </div>
    </div>

    <div class="homeBottom">
      <div class="letfBox">
        <div class="interval">
          <div class="lineBox">
            <div id="line" style="width: 98%; height: 280px"></div>
          </div>
        </div>
      </div>
      <div class="leftBottom">
        <div class="lineBox">
          <div id="pie" style="width: 98%; height: 280px"></div>
        </div>
      </div>
      <div class="rightBottom">
        <div class="lineBox">
          <!-- <div id="main1" style="width:98%;height: 280px;"></div> -->
          <div class="progress-title">岗位缺口TOP10</div>
          <div class="progress" v-for="(item, index) in top10Data" :key="index">
            {{ index + 1 }}.{{ item.label }}
            <el-progress :percentage="item.value" :format="format"></el-progress>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  jobApprovePage,
  jobCountByMonth,
  jobGapTop10,
  jobIntentionTop10,
  jobPublishTrend,
  topCount,
} from "@/api/workbench.js";
import * as echarts from "echarts";
export default {
  components: {
    Certification: () => import('../views/enterprise/certification'),
  },
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.7",
      // 遮罩层
      loading: false, //false true
      top10Data: [],

      // 首页数据
      mainList: [],
      // 审批数据
      dataList: [],
      // total
      total: 0,
    };
  },
  mounted() {
    this.getMain();
    this.getJobPublishTrend();
    this.getJobIntentionTop10();
    this.getJobGapTop10();
    this.getJobCountByMonth();
    this.getJobApprovePage();
  },
  created() {},

  methods: {
    format(percentage) {
      return `${percentage}人`;
    },
    menmuClik(url) {
      this.$router.push({ path: url });
    },

    /**
     * 头部数据统计
     * */
    getMain() {
      topCount().then((res) => {
        this.mainList = res.data;
      });
    },
    /**
     * 各月招聘岗位发布趋势
     * */
    getJobPublishTrend() {
      jobPublishTrend().then((res) => {
        this.lineChart(res.data);
      });
    },
    /**
     * 达成意向top10
     * */
    getJobIntentionTop10() {
      jobIntentionTop10().then((res) => {
        this.pieData(res.data)
      });
    },
    /**
     * 岗位缺口top10
     * */
    getJobGapTop10() {
      jobGapTop10().then((res) => {
        this.top10Data = res.data;
      });
    },
    /**
     * 岗位就业情况(月)
     * */
    getJobCountByMonth() {
      jobCountByMonth().then((res) => {
        this.jobChart(res.data);
      });
    },
    /**
     * 审批分页数据
     * */
    getJobApprovePage() {
      this.loading = true;
      jobApprovePage().then((response) => {
        this.dataList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },

    // 柱状图
    jobChart(data) {
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "岗位就业情况",
          // subtext: "模拟数据",
          // x: 'center',
          // textStyle: {
          //   fontSize: 14,
          // },
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          name: "岗位",
          type: "category",
          data: data.map((item) => item.label),
          // 设置X轴数据旋转倾斜
          axisLabel: {
            // rotate: 30, // 旋转角度
            interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
            rotate: 20,
          },
        },
        yAxis: {
          name: "数量",
          type: "value",
        },
        series: [
          {
            name: "",
            data: data.map((item) => item.value),
            type: "bar",
            barWidth: 20, //柱图宽度
            itemStyle: {
              color: "#5087ec", // 柱子颜色
              borderRadius: [5, 5, 0, 0], //柱子 上 右 下 左 圆角
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },

    // 折现图
    lineChart(data) {
      // 折线图
      var chartLineDom = document.getElementById("line");
      var myLineChart = echarts.init(chartLineDom);
      var optionLine;

      optionLine = {
        title: {
          text: "各月招聘岗位发布趋势",
        },
        xAxis: {
          name: "月份",
          type: "category",
          data: data.xaxis,
          axisLabel: {
            // rotate: 30, // 旋转角度
            interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
            rotate: 20,
          },
        },
        yAxis: {
          name: data.lineBarData[0].name,
          type: "value",
        },
        series: [
          {
            data: data.lineBarData[0].dataArr,
            type: "line",
            
          },
        ],
      };

      optionLine && myLineChart.setOption(optionLine);
    },


    // 饼图
    pieData(data) {
      const newData = data.map((item)=>{
        return {
          name: item.label,
          value: item.value,
        }
      })
      var chartDom = document.getElementById("pie");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "饱和岗位",
          // subtext: "虚拟数据",
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} 人'
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [5, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: newData,
          },
        ],
      };

      option && myChart.setOption(option);
    },

    columnarData() {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "岗位缺口TOP10",
          // subtext: "虚拟数据",
        },
        dataset: {
          source: [
            ["amount", "product"],
            [200, "操作工"],
            [200, "木工"],
            [200, "瓦工"],
            [200, "服务员"],
            [200, "维修工"],
            [200, "叉车司机"],
            [200, "物流分拣"],
            [200, "仪表工"],
            [200, "电工"],
          ],
        },
        grid: { containLabel: true },
        xAxis: { name: "amount" },
        yAxis: { type: "category" },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.topBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 10px; /* 增加内边距 */
  // margin: 20px 0; /* 增加外边距 */
  height: auto; /* 自适应高度 */
  background-color: #fff;
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加柔和的阴影 */
  div {
    width: 23%; /* 调整宽度以适应更多内容 */
    background-color: #E7F0FD;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); /* 更柔和的阴影 */
    margin: 10px; /* 统一子元素间距 */
    padding: 10px;
    text-align: center;
    line-height: 1.5; /* 调整行高 */
    font-size: 16px; /* 调整字体大小 */
    border-radius: 4px; /* 添加圆角 */
    transition: transform 0.2s ease-in-out; /* 鼠标悬停时的动画效果 */
  }

  div:hover {
    transform: translateY(-2px); /* 鼠标悬停时稍微提升 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 鼠标悬停时增强阴影 */
  }
}

.home {
  display: grid;
  grid-template-columns: 49.5% 49.5%;
  grid-gap: 1%;
  width: 100%;
  height: 44%;
  justify-content: space-between;

  img {
    width: 100%;
    height: 100%;
  }

  .letfBox {
    //display: grid;
    //grid-template-columns: 49.5% 49.5%;
    //grid-gap: 1%;
    height: 266px;
  }

  .rightBox {
    //width: 49%;
    .rightText {
      padding: 5px 8px 8px 6px;
      height: 266px;
      background-color: #fff;
    }
  }

  //
  .rightBottom {
    background-color: #fff;
    display: grid;
    grid-template-columns: 49.5% 49.5%;

    .lineBox {
      padding: 5px 8px 8px 6px;
      height: 252px;
    }
  }

  .memuBox {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    grid-gap: 15px 0;
    padding: 15px !important;
    border-radius: 6px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .items_box {
      //border: 1px solid red;
      .itemsImg {
        width: 38px;
        height: 38px;
        margin: auto;
      }

      .itemsText {
        text-align: center;
        font-size: 14px;
        margin-top: 4px;
      }
    }
  }

  .interval {
    margin-top: 10px;
    width: 100%;
    padding: 3px 6px 6px 5px;
    background-color: #fff;

    .policyBox {
      width: 100%;
      padding: 5px 5px;
      border: 0.5px solid #eef0f9;
      border-radius: 5px;
    }

    .even {
      width: 35%;
      height: 180px;
    }

    .messglist {
      width: 100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      // border-bottom: 1px solid #4ca9ff;
      margin-bottom: 5px;
      padding-left: 15px;

      .messg {
        font-size: 14px;
        font-weight: 600;
        color: #5d9aff;
      }

      .nubers {
        width: 14px;
        height: 14px;
        background-color: #5d6d7e;
        border-radius: 50%;
        margin: auto 0;
        margin-right: 5px;
      }

      .listbox {
        width: calc(100% - 140px);
        height: 30px;

        font-size: 14px;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
      }

      .timetbox {
        width: 100px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        margin-left: 10px;
      }
    }
  }

  .liveCss {
    width: 20%;
    display: flex;
    margin-top: 5px;
  }

  .yiji {
    margin: 0 auto;
    width: 40px;
    height: 20px;
    background-color: #d9001b;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
  }

  .erji {
    margin: 0 auto;
    width: 40px;
    height: 20px;
    background-color: #fb8c5b;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
  }

  .saji {
    margin: 0 auto;
    width: 40px;
    height: 20px;
    background-color: #feff69;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
  }

  .caption {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    border-bottom: 1px solid #4ca9ff;
  }

  .messg {
    // font-size: 14px;
    // font-size: 16px;
    // font-weight: bold;
    // color: #464646;
    font-size: 18px;
      font-weight: bold;
      color: #333;
  }

  .more {
    font-size: 14px;
    color: #2888e8;
    margin-right: 10px;
  }

  .titleText {
    padding: 5px 8px 8px 6px;
    height: 252px;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .lineBox {
    padding: 5px 8px 8px 6px;
    height: 252px;
  }

  .minroof {
    width: 100%;
    // padding: 3px 6px 6px 5px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;

    .backlogBox {
      width: 49.9%;
      padding: 5px 5px;
      border: 0.5px solid #eef0f9;
      border-radius: 5px;
    }

    .even {
      width: 35%;
      height: 180px;
    }

    .messglist {
      width: 100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      border-bottom: 1px solid #4ca9ff;
      margin-bottom: 5px;
      padding-left: 15px;

      .messg {
        font-size: 14px;
        font-weight: 600;
        color: #5d9aff;
      }

      .nubers {
        width: 20px;
        height: 20px;
        background-color: #4ca9ff;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 20px;
        margin: auto 0;
        margin-right: 5px;
      }

      .listbox {
        width: calc(100% - 30px);
        height: 30px;
        color: #5d9aff;
        font-size: 14px;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
        color: #5d9aff;
      }
    }
  }
}

.homeBottom {
  display: grid;
  grid-template-columns: 49.5% 24.5% 24%;
  grid-gap: 1%;
  width: 100%;
  height: 48%;
  justify-content: space-between;

  .letfBox {
    //display: grid;
    //grid-template-columns: 49.5% 49.5%;
    //grid-gap: 1%;
    height: 266px;
    background-color: #fff;
  }

  //
  .leftBottom {
    height: 266px;
    background-color: #fff;

    .lineBox {
      padding: 5px 8px 8px 6px;
      height: 252px;
    }
  }

  .rightBottom {
    height: 266px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    .progress-title {
      position: absolute;
      top: 5px;
      left: 10px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .lineBox {
      margin: 30px 0 0 5px;
      padding: 5px 8px 8px 6px;
      height: 252px;
      overflow: auto;
      // .progress{
      //   display: flex;
      //   justify-content: space-between;
      // }
    }
  }

  .titleText {
    padding: 5px 8px 8px 6px;
    height: 252px;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .lineBox {
    padding: 5px 8px 8px 6px;
    height: 252px;
  }
}
</style>
